<template>
    <div class="examListBox">
        <div class="header" style="height:205px"></div>
        <!-- 主体 -->
        <div class="main-box">
            <div class="header">
              <div style='width: 33%;display: flex;align-items: center;'>
                <div class="title">{{pageName}}</div>
                <el-breadcrumb class="other">
                    <el-breadcrumb-item :to="{ path: '/studyCenter' }">学习中心</el-breadcrumb-item>
                    <el-breadcrumb-item>{{pageName}}</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
              <div style='width:33%;font-weight:700;'>{{activeChapterTitle}}</div>
              <el-button @click='showCard = true' v-if="$route.name == 'chapter'" class='button' type="primary" icon='el-icon-guide' size='mini'>切换章节</el-button>
            </div>
            <div class="content">
                <el-table class="list-table" :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="date" label="试卷名称">
                        <template slot-scope="scope">
                            <span class="scope-icon">{{iconTxt}}</span>
                            <span style="margin-left: 10px">{{ scope.row.paperName || scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="更新时间" width="180" v-if='type > 0'>
                        <template slot-scope="scope">
                            <div style="text-align:center;">{{ scope.row.createTime }}</div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="address" label="完成度" width="120">
                        <template slot-scope="scope">
                            <div style="text-align:center;">{{ scope.row.completeness }}</div>
                        </template>
                    </el-table-column> -->
                     <el-table-column prop="address" label="做题次数" width="120" v-if='type > 0'>
                        <template slot-scope="scope">
                            <div style="text-align:center;">{{ scope.row.processItemCount }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <el-button
                                @click="handleChapterItemClick(scope.row)"
                                type="text"
                                size="small"
                                class="operateBtn"
                            >进入考试</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="content-footer" v-if="total>0">
                    <el-pagination
                        :current-page="currentPage"
                        :page-size="pageSize"
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="total"
                    ></el-pagination>
                    <div class="recordSum">共{{total}}条记录</div>
                </div>
            </div>
        </div>
        <!-- <Footer class='footer'></Footer> -->
        <div v-show='showCard'>
          <div class='shade' @click='closeCard'></div>
          <el-card class="box-card" >
            <div slot="header" class="clearfix">
              <span>选择篇章</span>
              <el-button @click='closeCard' style="float: right; padding: 3px 0" type="text">关闭</el-button>
            </div>
            <div v-if='chapters.length == 0' style='text-align:center;font-weight:600;color:#aaa;margin-bottom:20px;'>暂无数据</div>
            <el-collapse v-else v-model="activeName" accordion>
              <template v-for='(item,index) in chapters'>
                <el-collapse-item :title="item.name" :name="index">
                  <div v-for='(val,num) in item.children'  class='collpaseItems'
                    :class="activeItem === val.chapterId?'activeCollpaseItems':''"
                    @dblclick="clickChapter(val,index,num)"
                  >
                    {{val.name}}
                    <!-- <el-divider></el-divider> -->
                  </div>
                </el-collapse-item>
              </template>
            </el-collapse>
          </el-card>
        </div>
    </div>
</template>
<script>
import Header from "../../../components/common/header.vue";
import Footer from "../../../components/common/footer.vue";
import eventBus from '../../../utils/eventBus.js'
import { log } from 'util';
import { getChapters } from '../../../api/chapter';
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      showCard:false,
      pageName: "章节练习",
      iconTxt: "NEW",
      currentPage: 1, //当先页
      pageSize: 10, //一次几条
      total: 0, //总共条数
      pageNumber:1,//页数
      tableData: [
        //表数据
      ],
      activeName:0,
      activeItem:'',
      activeChapterTitle:'',
      chapters:[]  //篇章列表
    };
  },
  created() {
    let name = this.$route.name
    if (name== "chapter") {
      this.pageName = "章节练习";
      this.iconTxt = "NEW";
      this.type=0;
      this.routePath='/chapter'
    } else if (name == "practice") {
      this.pageName = "模拟考试";
      this.iconTxt = "精选";
      this.type=2;
      this.routePath='/enter'
    }else if(name == 'zhenti'){
      this.pageName = "历年真题";
      this.iconTxt = "精选";
      this.type=1;
      this.routePath='/enter'
    }
    this.routerUrl = this.$route.fullPath;
  },
  mounted(){
    if(this.type == 0){
      let chaptersList = JSON.parse(localStorage.getItem('chaptersList'));
      let categoryId = localStorage.getItem('categoryId');
      getChapters({subjectId:categoryId})
      .then(res=>{
        if(res.code == 200){
          this.chapters = res.data
          if(chaptersList){
            this.tableData = this.chapters[chaptersList.index].children[chaptersList.num].children;
            this.activeItem = this.chapters[chaptersList.index].children[chaptersList.num].chapterId;
            this.activeName = chaptersList.index;
            this.activeChapterTitle = this.chapters[chaptersList.index].children[chaptersList.num].name;
          }else{
            this.showCard = true
          }
        }else{
          this.showCard = false;
          this.$message.error('获取章节篇章失败，请重试！')
        }
      })
    }else{
      this.getPaperList();
    }
  },
  methods: {
    // 关闭选择篇章节
    closeCard(){
      if(!this.activeChapterTitle && this.chapters.length > 0) {
        this.$message('请先选择篇章');
      }else{
        this.showCard = false;
      }
    },
    // 点击切换章节
    clickChapter(item,index,num){
      this.tableData = item.children;
      this.activeItem = item.chapterId;
      this.activeName = index;
      this.activeChapterTitle = item.name;
      this.showCard = false;
      localStorage.setItem('chaptersList',JSON.stringify({title:item.name,index:index,num:num}))
    },
    getPaperList(){//获取列表
      let categoryId = localStorage.getItem('categoryId')
      this.$get('/api/v1/papers',{
        subjectId:categoryId,
        type:this.type,
        pageNumber:this.pageNumber,
        pageSize:10
      }).then(res=>{
        if(res.code!=200){
          this.$message({
              message: res.msg,
              type: 'warning'
          });
        }else{
          let tableData = res.data;
          tableData.forEach(item=>{
            item.createTime = this.crtTimeFtt(item.createTime )
          })
          this.total = res.totalCount;
          this.tableData = tableData;
        }
      })
    },
    crtTimeFtt(val) {//格式化时间
      if (val != null) {
        var date = new Date(val);
        return this.myformatter(date.getFullYear()) + '-' + this.myformatter((date.getMonth() + 1)) + '-' + this.myformatter(date.getDate()) + ' ' + this.myformatter(date.getHours()) + ':' + this.myformatter(date.getMinutes()) + ':' + this.myformatter(date.getSeconds());
      }
    },
    myformatter(val){//补位
      if(val<10){
        return '0'+ val
      }else{
        return val;
      }
    },
    handleCurrentChange(currentIdx) {
      console.log(currentIdx);
      this.pageNumber = currentIdx;
      this.getPaperList();
    },
    handleChapterItemClick(ob) {
      let query = {
        id: ''
      }
      if(this.type==0){
        query.page="chapter",
        query.entrance = 'zhangjie',
        query.id = ob.paperId
        query.paperName = ob.paperName
      }else{
        query.id = ob.id
      }
      let subjectName = localStorage.getItem('subjectName')
      if(subjectName !== '注册会计师'){
        this.routePath = '/intermediateEnter'
      }
      let routerUrl = this.$router.resolve({
        path: this.routePath,
        query
      })
      window.open(routerUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss">
.el-table th{
  background: #f1f1f1;
}
.examListBox {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 40px);
  background-image: url();
  .main-box {    //列表盒子
    flex:1;
    min-height: calc(100vh - 305px);
    .content {
      //列表内容
      .list-table {
        .scope-icon {
          padding: 2px 8px;
          background-color: #f37b1d;
          border-radius: 2px;
          color: #fff;
          font-size: 10px;
          font-weight: bold;
        }
      }
      .operateBtn {
        padding: 8px 12px;
        color: #fff;
        background-color: #3bb4f2;
        border-color: #3bb4f2;
        border-radius: 14px;
      }
      .list-table {
        .has-gutter tr th {
          background: #f9f9f9;
          border-top: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          .cell {
            color: #333;
            text-align: center;
          }
        }
      }
      .content-footer {//分页
        margin-top:12px;
        .recordSum {
          color: #999;
          font-size: 14px;
        }
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    width: 1210px;
    margin: 30px auto;
    padding: 10px 20px;
    background: white;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
    .header {
      //列表头部
      padding-top: 26px;
      display: flex;
      align-items: center;
      padding-bottom: 10px;
      position: relative;
      justify-content: space-between;
      .title {
        font-weight: 600;
        font-size: 20px;
      }
      .other {
        margin: 8px 0 0 20px;
        .el-breadcrumb__item:last-child .el-breadcrumb__inner,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
          color: #0e90d2;
        }
        .is-link {
          color: #0e90d2;
        }
      }
    }
      
  }
      .text {
        font-size: 14px;
      }

      .item {
        margin-bottom: 18px;
      }

      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }
      .clearfix:after {
        clear: both
      }
      .shade{
        width:100%;
        height:100%;
        z-index: 9998;
        position: fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        background-color: #eee;
        opacity: 0.5;
      }
      .box-card {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        width: 480px;
        position: fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        max-height: 80%;
        overflow-y:auto; 
        z-index: 9999;
        
      }
}
// 修改element 样式
.el-pager li.active {
  background-color: #409eff;
  cursor: default;
  color: white !important;
}
.el-pager li {
  border: 1px solid #ccc;
  margin-right: 5px !important;
}
.el-pager li.active + li {
  border: 1px solid #ccc !important;
}
.el-divider--horizontal{
  margin:10px 0!important;
}
.el-collapse{
  border-top:none !important;
}
.el-collapse-item__content{
  .collpaseItems{
    padding-left:15px;
    height:35px;
    line-height:35px;
    // margin-bottom:15px;
    // &:nth-last-child(1){
    //   margin-bottom:0;
    // }
  }
  .activeCollpaseItems{
    background-color: #ddd;
    color:white;
  }
}
</style>
